<script setup>
import MessageCardComp from "@/components/MessageComponents/MessageCardComp.vue";
const messageData = [
  { isSuccess: true, message: "任务完成", author: "张三", time: "2023-12-25" },
  { isSuccess: false, message: "操作失败", author: "李四", time: "2023-11-15" },
  { isSuccess: true, message: "恭喜你", author: "王五", time: "2023-10-10" },
  { isSuccess: false, message: "系统错误", author: "赵六", time: "2023-09-01" },
  { isSuccess: true, message: "一切顺利", author: "孙七", time: "2023-08-20" },
  { isSuccess: false, message: "数据丢失", author: "周八", time: "2023-07-30" },
  { isSuccess: true, message: "加油", author: "吴九", time: "2023-06-15" },
  { isSuccess: false, message: "权限不足", author: "郑十", time: "2023-05-05" },
  { isSuccess: true, message: "成功", author: "钱十一", time: "2023-04-20" },
  { isSuccess: false, message: "网络异常", author: "王十二", time: "2023-03-10" },
  { isSuccess: true, message: "万事如意", author: "李十三", time: "2023-02-25" },
  { isSuccess: false, message: "服务器维护", author: "张十四", time: "2023-01-15" },
  { isSuccess: true, message: "感谢支持", author: "刘十五", time: "2022-12-31" },
  { isSuccess: false, message: "登录失败", author: "陈十六", time: "2022-11-20" },
  { isSuccess: true, message: "恭喜发财", author: "杨十七", time: "2022-10-10" },
  { isSuccess: false, message: "操作超时", author: "林十八", time: "2022-09-01" },
  { isSuccess: true, message: "工作完成", author: "朱十九", time: "2022-08-20" },
  { isSuccess: false, message: "错误信息", author: "胡二十", time: "2022-07-30" },
  { isSuccess: true, message: "太好了", author: "高二十一", time: "2022-06-15" },
  { isSuccess: false, message: "未知错误", author: "路二十二", time: "2022-05-05" }
];

</script>

<template>
<div class="message-board">
  <div class="message-container">
    <template v-for="i in messageData">
      <MessageCardComp :isSuccess="i.isSuccess" :message="i.message" :author="i.author" :time="i.time"></MessageCardComp>
    </template>
  </div>

</div>
</template>

<style scoped lang="scss">
.message-board{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.message-container {
  margin-top: 100px;
 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 60px;
  width: 80%;
  max-width: 1000px;
}
</style>